<template>
  <div class="common-layout">
    <el-container>
      <el-header>Header</el-header>
      <el-main>
        <el-form
          :inline="true"
          :model="form"
          label-width="auto"
          style="max-width: 600px"
        >
          <el-form-item label="日期">
            <el-date-picker
              v-model="form.date1"
              type="date"
              placeholder="Pick a date"
              style="width: 100%"
            />
          </el-form-item>
          <el-form-item label="教师">
            <el-input v-model="form.name" placeholder="请输入教师姓名" />
          </el-form-item>
          <el-form-item label="任职学校及所在区">
            <el-input
              v-model="form.name"
              placeholder="请输入任职学校及所在区"
            />
          </el-form-item>
          <el-form-item label="授课内容">
            <el-input v-model="form.name" placeholder="授课内容" />
          </el-form-item>
          <el-form-item label="单元">
            <el-input v-model="form.name" placeholder="请输入单元" />
          </el-form-item>
          <el-form-item label="观察员">
            <el-input v-model="form.name" placeholder="请输入观察员" />
          </el-form-item>
          <el-form-item label="观察时间">
            <el-col :span="11">
              <el-date-picker
                v-model="form.date1"
                type="date"
                placeholder="Pick a date"
                style="width: 100%"
              />
            </el-col>
            <el-col :span="2" class="text-center">
              <span class="text-gray-500">-</span>
            </el-col>
            <el-col :span="11">
              <el-time-picker
                v-model="form.date2"
                placeholder="Pick a time"
                style="width: 100%"
              />
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">Create</el-button>
            <el-button>Cancel</el-button>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { reactive } from "vue";

const form = reactive({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});

const onSubmit = () => {
  console.log("submit!");
};

export default defineComponent({
  setup() {
    return {
      form,
      onSubmit,
    };
  },
});
</script>

<style lang="stylus" scoped></style>
